<template>
<u-mask :zoom="false" :show="valueCom" @click="cancel">
		<view class="warp">
			<view class="pr coupon-content" >
				<image class="coupon-img" @click.stop="viewCoupon" @load="load" src="https://pay.zhaimei365.com/image/bShop/newCoupon.png"></image>
			    <view class="coupon-content-container" v-if="imgIsLoad">
					<view class="coupon-price">
						<text class="fs34">￥</text>
						<text>{{_newUSerCoupon.memberCouponMoney||0}}</text>
					</view>
			    </view>
				<u-icon @click.stop="cancel" class="colosed" color="white" size="65" name="close-circle"></u-icon>
			</view>
		</view>
	</u-mask>	
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
		},
		computed: {
			valueCom: {
				get () {
					return this.value
				},
				set (val) {
					this.cancel()
				}
			}
		},
		data(){
			return{
				imgIsLoad:false
			}
		},
		methods: {
			viewCoupon(){
				uni.navigateTo({
					url:'/pages/my/coupon/myCoupon'
				})
				this.cancel()
			},
			load(e){
				this.imgIsLoad = true
			},
			// 取消
			cancel () {
				this.$emit('cancel')
				this.$emit('input', false)
				this.$u.vuex('_newUSerCoupon.isNewMemberCoupon',false)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}
		.coupon-content{
			width: 750rpx;
		}
	
		.coupon-img{
			width: 708rpx;
			height: 615rpx;
			margin: 0 20rpx;
			
		}
		.coupon-content-container{
			position: absolute;
			top: 192rpx;
			width: 750rpx;
			text-align: center;
			.coupon-price{
				font-size: 80rpx	;
				font-weight: bold;
				font-size: 80rpx;
				text-transform: none;
				color: #F07938;
			}
		}
		.colosed{
			position: absolute;
			right: 341rpx;
			bottom: -60rpx;
			z-index: 999;
		}
</style>
